<template>
	<view class="container">


		<view class="section">
			<text class="label">普通输入</text>
			<input class="input" placeholder="请输入内容" />
		</view>


		<view class="section">
			<text class="label">限制最大长度</text>
			<input class="input" placeholder="最多输入10个字" maxlength="10" />
		</view>

		<view class="section">
			<text class="label">数字输入</text>
			<input class="input" type="number" placeholder="请输入数字" />
		</view>


		<view class="section">
			<text class="label">密码输入</text>
			<input class="input" placeholder="请输入密码" password />
		</view>

		<view class="section">
			<text class="label">可查看密码</text>
			<uni-easyinput type="password" v-model="password" placeholder="请输入密码" :passwordIcon="true" />
		</view>


		<view class="section">
			<text class="label">带小数点</text>
			<input class="input" type="digit" placeholder="例如 12.36" />
		</view>


		<view class="section">
			<text class="label">身份证输入</text>
			<input class="input" type="idcard" placeholder="请输入身份证号" />
		</view>


		<view class="section">
			<text class="label">红色占位符</text>
			<input class="input" placeholder="我是红色占位符" placeholder-style="color:red;" />
		</view>


		<view class="section">
			<text class="label">带清除按钮</text>
			<uni-easyinput v-model="username" placeholder="输入后右侧显示X" clearable />
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				password: '',
				username: ''
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
	}

	.section {
		margin-bottom: 20rpx;
	}

	.label {
		font-size: 25rpx;
		padding: 3rpx;
		color: #000000;
		margin-bottom: 10rpx;
		display: block;
		font-weight: bold;
	}

	.input {
		border: 1px solid #ddd;
		border-radius: 10rpx;
		padding: 15rpx;
		font-size: 28rpx;
		background: #fff;
	}
</style>